<template>
  <h3>这是首页</h3>
  <p>doubleA: {{ doubleA }}</p>
  <p>count: {{ count }}</p>
  <p>{{ name }}的年龄是{{ age }}，爱好是{{ likes }}</p>
</template>

<script>
// mapState是一个辅助函数
// 不是必须的，用来简化state的引入(一个组件需要用到多个仓库数据的时候)
import { mapState } from "vuex";

export default {
  data() {
    return {
      aihao: "eat",
      a: 123,
    };
  },

  // computed: {
  //   doubleA() {
  //     return this.a * 2;
  //   },
  // },

  computed: {
    doubleA() {
      return this.a * 2;
    },
    count() {
      // console.log(this.$store.state);

      return this.$store.state.module1.count;
    },
    name() {
      return this.$store.state.module1.name;
    },
    age() {
      return this.$store.state.module1.age;
    },
    likes() {
      return this.$store.state.module1.likes;
    },
  },

  // computed: mapState(["count", "name", "age", "likes"]),

  // mapState还可以用对象的语法
  // computed: mapState({
  //   num: "count",
  //   name: (state) => state.name, // 写成箭头函数，可以将仓库的数据拿过来做变形
  //   age: (state) => state.age * 2,
  //   likes: function (state) {
  //     // 变形的时候，需要使用到this。那么要改成普通函数
  //     return [state.likes, this.aihao];
  //   },
  // }),

  // 当组件里面已经有计算属性了，又要使用mapState的时候，需要用到展开运算符
  // computed: {
  //   doubleA() {
  //     return this.a * 2;
  //   },
  //   ...mapState(["count", "name", "age", "likes"]),
  // },
};
</script>
